<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>woodwhales-music</title>
    <link rel="icon" th:href="@{/favicon.ico}" type="image/x-icon"/>
    <link rel="bookmark" th:href="@{/favicon.ico}" type="image/x-icon"/>
    <link rel="stylesheet" th:href="@{css/stylesheets/style.css}">
    <link rel="stylesheet" th:href="@{css/my-css.css}">
    <script th:src="@{js/jquery-1.7.2.min.js}"></script>
</head>

<body>
<div id="player">
    <div class="cover"></div>
    <div class="ctrl">
        <div class="tag">
            <strong>Title</strong>
            <span class="artist">Artist</span>
            <span class="album">Album</span>
        </div>
        <div class="control">
            <div class="left">
                <div class="rewind icon"></div>
                <div class="playback icon"></div>
                <div class="fastforward icon"></div>
            </div>
            <div class="volume right" id="volumeDiv">
                <div class="mute icon left"></div>
                <div class="slider left">
                    <div class="pace"></div>
                </div>
            </div>
        </div>
        <div class="progress">
            <div class="slider">
                <div class="loaded"></div>
                <div class="pace"></div>
            </div>
            <div class="timer left">0:00</div>
            <div class="right">
                <div class="repeat icon"></div>
                <div class="shuffle icon"></div>
            </div>
        </div>
    </div>
</div>
<ul id="playlist"></ul>
<footer id="footer">
</footer>
<div id="box" class="box">
    <div class="box-in"></div>
</div>
<script th:src="@{js/jquery-ui-1.8.17.custom.min.js}"></script>
<script th:src="@{js/script.js}"></script>
<script th:inline="javascript">
    $(function () {

        showCopyRight('木鲸鱼', 'https://www.woodwhales.cn/');

        //获取窗口宽度
        let winWidth;
        if (window.innerWidth) {
            winWidth = window.innerWidth;
        } else if ((document.body) && (document.body.clientWidth)) {
            winWidth = document.body.clientWidth;
        }

        if(winWidth <= 700) {
            $('#volumeDiv').hide();
        }

        playMusic([[${musicInfoList}]]);
    });

    $(window).resize(function() {
        //获取窗口宽度
        let winWidth;
        if (window.innerWidth) {
            winWidth = window.innerWidth;
        } else if ((document.body) && (document.body.clientWidth)) {
            winWidth = document.body.clientWidth;
        }

        if(winWidth <= 700) {
            $('#volumeDiv').hide();
        } else if(winWidth > 700) {
            $('#volumeDiv').show();
        }
    });

    var timer = null;
    box.onclick = function(){
        cancelAnimationFrame(timer);
        timer = requestAnimationFrame(function fn(){
            var oTop = document.body.scrollTop || document.documentElement.scrollTop;
            if(oTop > 0){
                document.body.scrollTop = document.documentElement.scrollTop = oTop - 200;
                timer = requestAnimationFrame(fn);
            }else{
                cancelAnimationFrame(timer);
            }
        });
    }
</script>
</body>
</html>